<template>
    <div>
        <div  v-if="isMoreLoad" @click="scrollLoadMore" class="moreLoad">
        <span v-if="loading">加载中...</span>
        <span v-else>查看更多</span>
        </div>
        <div class="moreLoad" v-if="loadLastText">到底啦^_^</div>
    </div>
</template>

<script>
import Axios from 'axios';
import { getArticles } from '@/../api/api.js'
export default {
    name: 'Sorter',
    props:{
        tips:{
            type: String,
            default: ""
        },
        tag:{
            type:Object,
            default: {
                id: 0,
                tag:null
            }
        },
        count: {
            type:Number,
            default: 0
        }
    },
    data() {
        return {
            isMoreLoad: true ,  
            loading: false,  
            loadLastText: false,
            pageSize:3,
            currentPage:1, 
            artciles:{},
            tipsSor:null,
            tagSor:{
                id:0,
                tag:null
            }
        }
    },
    methods: {
        scrollLoadMore() {
            if (this.loading) {
                return;
            }
            this.loading = true;
            Axios.get(getArticles,{
                params: {
                    tag: (this.tagSor.tag ?'['+this.tagSor.tag+']':this.tagSor.tag),
                    tips: this.tipsSor,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                }
            })
            .then(Response => {
                if (Response.data.message == 'success') {
                    this.$parent.articles.count = Response.data.data.count;
                    this.$parent.articles.rows = this.$parent.articles.rows.concat(Response.data.data.rows);
                    this.loading = false;
                    if (Response.data.data.count > this.pageSize*this.currentPage) {
                        this.isMoreLoad = true;
                    }
                    else {
                        this.isMoreLoad = false;
                        this.loadLastText = true;
                    }
                }
            })
            .catch(err => {
                console.log(err);
            });
        }
    },
    mounted() {
        window.addEventListener('scroll', () => {
        let scr = document.documentElement.scrollTop || document.body.scrollTop;
        let clientHeight = document.documentElement.clientHeight; 
        let scrHeight = document.documentElement.scrollHeight || document.body.scrollHeight; 
        if(scr + clientHeight  >= scrHeight) {
            if (this.count > this.pageSize*this.currentPage) {
                if(this.isMoreLoad) { 
                    this.currentPage = this.currentPage + 1; 
                    this.scrollLoadMore(); 
                }    
                else {
                    return;
                }
            }
            else {
                this.isMoreLoad = false;
                this.loadLastText = true;
            }
        }
        });
    },
    watch: {
        'tag.tag'(newValue,oldValue) {
            this.tag.tag = newValue;
            console.log(newValue+"tag1")
            this.tagSor.tag = newValue;
            this.tipsSor = null;
            this.isMoreLoad = true;
            this.loadLastText = false;
            this.currentPage = 1;
            this.pageSize = 3;
        },
        tips(newValue,oldValue) {
            this.tips = newValue;
            console.log(newValue+"tips1")
            this.tipsSor = newValue;
            this.tagSor.tag = null;
            this.isMoreLoad = true;
            this.loadLastText = false;
            this.currentPage = 1;
            this.pageSize = 3;
        }
            
    },
}
</script>

<style  lang="stylus" scoped>
.moreLoad
    text-align center
    padding 30px 30px 30px 30px
    font-size 15px 
    color #919191
</style>